<template>
  <div class="query-form-container">
    <el-form inline :model="localForm">
      <template v-for="field in visibleFields" :key="field.prop">
        <el-form-item :label="field.label">
          <!-- 选择组件 -->
          <el-select
            v-if="field.component === 'select'"
            v-model="localForm[field.prop]"
            clearable
            :filterable="field.filterable !== false"
            :placeholder="field.placeholder"
            style="width: 200px"
          >
            <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>

          <!-- 日期选择器 -->
          <el-date-picker
            v-else-if="field.component === 'date-picker'"
            v-model="localForm[field.prop]"
            clearable
            :end-placeholder="field.endPlaceholder"
            :placeholder="field.placeholder"
            :start-placeholder="field.startPlaceholder"
            style="width: 200px"
            :type="field.type || 'date'"
            :value-format="field.valueFormat || 'YYYY-MM-DD'"
          />

          <!-- 默认输入框 -->
          <el-input v-else v-model="localForm[field.prop]" clearable :placeholder="field.placeholder" style="width: 200px" />
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, watch } from 'vue'

// 组件属性定义
interface FormField {
  label: string
  prop: string
  component?: string
  placeholder?: string
  options?: { label: string; value: string | number }[]
  filterable?: boolean
  type?: string
  valueFormat?: string
  startPlaceholder?: string
  endPlaceholder?: string
  visible?: boolean
  span?: number
  [key: string]: any
}

type FormData = Record<string, any>

interface Props {
  modelValue?: FormData
  fields: FormField[]
  fieldsPerRow?: number
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}),
  fieldsPerRow: 3,
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: FormData): void
  (e: 'search'): void
  (e: 'reset'): void
}>()

// 计算可见字段
const visibleFields = computed(() => {
  return props.fields.filter((field) => field.visible !== false)
})

// 本地表单响应式数据
const localForm = reactive<FormData>({ ...props.modelValue })

// 监听输入数据变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      Object.keys(newVal).forEach((key) => {
        if (key in localForm) {
          localForm[key] = newVal[key]
        }
      })
    }
  },
  { deep: true }
)

// 监听本地数据变化，同步到父组件
watch(
  localForm,
  (newVal) => {
    emit('update:modelValue', { ...newVal })
  },
  { deep: true }
)

// 处理查询
const handleSearch = () => {
  emit('search')
}

// 处理重置
const handleReset = () => {
  // 重置表单数据
  visibleFields.value.forEach((field) => {
    // 假设每个字段的初始值都是空字符串或空数组
    if (field.component === 'date-picker' && field.type === 'daterange') {
      localForm[field.prop] = []
    } else {
      localForm[field.prop] = ''
    }
  })

  // 触发重置事件
  emit('reset')
}
</script>

<style scoped>
.query-form-container {
  display: inline-block;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 保持表单项样式与旧版一致 */
.el-form-item {
  margin-bottom: 0;
  margin-right: 10px;
}

/* 保持按钮样式与旧版一致 */
.form-actions {
  display: flex;
  gap: 8px;
}
</style>
